import { useEffect } from "react";
import { useSelector } from "react-redux";
import TopicsList from "../../component/topicsList";
import { useTopicList } from "../../store/action";
import IndexNav from "./indexNav";
import qs from "qs";
import { useLocation } from "react-router";
import IndexPagination from "../../component/indexPagination";

function Index(props) {
    let { data, loading } = useSelector((state) => state.topics);

    let getData = useTopicList();
    let { search } = useLocation();
    let { page = 1, tab = "all" } = qs.parse(search.substr(1));

    useEffect(() => {
        getData(tab, page);
    }, [page, tab]);
    return (
        <div>
            <IndexNav />
            <TopicsList data={data} loading={loading} />
            {loading ? " " : <IndexPagination />}
        </div>
    );
}

export default Index;
